<template>
    <div id="margin-trading-echart" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script setup>
import { onMounted, watch } from "vue";
import * as echarts from 'echarts'
import { getMarginTradingData } from "../service/marginTrading";
import { builtMarginTradingEchartOption } from "../myechart/multiYaxEchart";

let myChart = null
const initEchart = () => {
    myChart = echarts.init(document.getElementById('margin-trading-echart'))
    myChart.resize({});
}

const loadEchart = () => {
    getMarginTradingData().then(res => {
        let option = builtMarginTradingEchartOption(res.data)
        myChart.setOption(option)
    })
}

onMounted(()=> {
    initEchart()
    loadEchart()
})
</script>